<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">

		<title>Reportes</title>

		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

		<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

		<script src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

		<link  href="../css/bootstrap.min.css" rel="stylesheet">

		<link  href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">

		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

		<script src="../js/datatable.js"></script>
		<script src="../js/datepicker.js"></script>
	</head>

	<body>
		<div class="container">

			<h1><i class="fa fa-pie-chart"></i>Reporte de Tarjeta de Control Visible</h1>
			<hr />

			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">Filtros</h3>
				</div>
				<div class="panel-body">
					<form class="form-horizontal">

						<div class="form-group">
							<label for="select" class="col-lg-2 control-label">Seleccione el tipo de Reporte</label>
							<div class="col-lg-10">
								<select class="form-control" id="select">
									<option>TODO</option>
									<option>ENTRADA</option>
									<option>SALIDAS</option>

								</select>
							</div>
						</div>
					</form>
				</div>

				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">Campos</h3>
					</div>

					<div class="panel-body">
						<form class="form-horizontal">

							<div class="form-group">
								<label for="select" class="col-lg-2 control-label">Proveedor</label>
								<div class="col-lg-10">
									<select class="form-control" id="select">
										<option>TODO</option>
										<option>ENTRADA</option>
										<option>SALIDAS</option>

									</select>
								</div>
							</div>
						</form>
					</div>

					<div class="panel-body">
						<form class="form-horizontal">

							<div class="form-group">
								<label for="select" class="col-lg-2 control-label">Area</label>
								<div class="col-lg-10">
									<select class="form-control" id="select">
										<option>TODO</option>
										<option>ENTRADA</option>
										<option>SALIDAS</option>

									</select>
								</div>
							</div>
						</form>
					</div>

					<div class="panel-body">
						<form class="form-horizontal">

							<div class="form-group">
								<label for="select" class="col-lg-2 control-label">Mercaderia</label>
								<div class="col-lg-10">
									<select class="form-control" id="select">
										<option>TODO</option>
										<option>ENTRADA</option>
										<option>SALIDAS</option>

									</select>
								</div>
							</div>
						</form>
					</div>

				</div>

				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">Reporte en un Intervalo de Tiempo</h3>
					</div>

					<div class="panel-body">
						<div class="panel panel-info">
							<div class="panel-heading">
								<h3 class="panel-title">Parámetros Para el Reporte</h3>
							</div>
							<div class="panel-body">
								<form  class="form-horizontal">
									<div class="form-group">
										<label for="fechaInicio" class="col-lg-2 control-label">Fecha Inicio</label>
										<div class="col-lg-10">
											<input type="text" class="form-control" id="fechaInicio" placeholder="Fecha de Inicio">
										</div>
									</div>

									<div class="form-group">
										<label for="fechaFin" class="col-lg-2 control-label">Fecha Fin</label>
										<div class="col-lg-10">
											<input type="text" class="form-control" id="fechaFin" placeholder="Fecha Fin">
										</div>
									</div>

								</form>
							</div>
						</div>
					</div>

				</div>

				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">Razón Reporte</h3>
					</div>
					<div class="panel-body">
						<div class="form-group">
							<label for="textArea" class="col-lg-2 control-label">Textarea</label>
							<div class="col-lg-10">
								<textarea class="form-control" rows="3" id="textArea"></textarea>
								<span class="help-block">
									
									<div class="form-group">
										<div class="col-lg-10 col-lg-offset-2">

											<button type="submit" class="btn btn-primary">
												Generar Reporte
											</button>
											
											<button type="submit" class="btn btn-primary">
												Imprimir Reporte
											</button>
										</div>
									</div>
									
									
									</span>
							</div>
						</div>
					</div>
				</div>

				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title">Reportes Generados</h3>
					</div>
					<div class="panel-body">
						<form  class="form-horizontal"></form>
					</div>
					<table id="tabla" class="display" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th>Código</th>
								<th>Descripción</th>
								<th>Inicio</th>
								<th>Ingreso</th>
								<th>Salida</th>
								<th>Total</th>
							</tr>
						</thead>

						<tfoot>
							<tr>
								<th>Código</th>
								<th>Descripción</th>
								<th>Inicio</th>
								<th>Ingreso</th>
								<th>Salida</th>
								<th>Total</th>
							</tr>
						</tfoot>

						<tbody>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
							<tr>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
								<td>xxxxx</td>
							</tr>
						</tbody>
					</table>
				</div>

			</div>

		</div>

	</body>
</html>